vlwkaos' digital garden

Webpack 4에서 5로 버전업 시도

각 step마다 npm run build로 에러를 확인

  1. webpack-cli 업데이트, webpack 업데이트 > dependency 호환성이 안맞는 모듈 목록이 뜬다.
  2. 경고 뜨는 dependency들 업데이트 > ParserHelper 모듈을 찾을 수 없다.
    1. https://webpack.js.org/blog/2020-10-10-webpack-5-release/
    2. /lib/javascript/JavascriptParserHelper 로 이름이 바뀜
  3. 모듈 이름을 위에 나온대로 변경 > CopyPlugin 옵션 형태가 일치하지 않음
    1. 배열이 아닌 json형태에 patterns: [] 로 옵션을 줘야함
  4. CopyPlugin에 옵션을 제대로 설정 > Webpack 설정에 node라는 옵션이 사라짐
    1. 공식문서에 따라 fallback옵션으로 처리
      1. If you are using something like node.fs: 'empty' replace it with resolve.fallback.fs: false.
  5. fallback 옵션 처리 후 > ParserHelpers.toConstantDependencyWithWebpackRequire 라는 함수가 존재하지 않음
    1. toConstantDependency로 함수 이름이 바뀜
  6. 함수 이름을 위대로 변경 > ejs 파일이 제대로 빌드되지 않음
    1. ejs 관련 로더 버전 올려봄
    2. html-loader, html-webpack-plugin도 버전 올림
    3. https://github.com/webpack/webpack/issues/11909
  7. ejs관련 모듈 버전업 > 기본 제공하던 node.js core module이 일부 사라져서 찾을 수 없음
    1. resolve.fallback: { "crypto": require.resolve("crypto-browserify") } 이런식으로 fallback 용 추가
    2. crypto-browserify
    3. stream-browserify
  8. core module을 피딩 해줌 > css 파일이 제대로 빌드되지 않음
    1. sass loader 바로 최신버전 올렸더니 문제가 생김. 하지만 7버전은 웹팩 5와 호환되지 않으므로 무조건 올려야함
      1. 7 > 8 > 9 에서 breaking change가 있었음
        1. https://stackoverflow.com/questions/48957241/webpack-error-file-to-import-not-found-or-unreadable-bourbon-how-to-fix
      2. dart-sass wrapper 에서 node-sass로 다시 변경
      3. 우선 sass-loader를 8 버전으로 올려봄.
        1. 옵션 형태가 바뀐 부분이 있어 맞춰주고 빌드. syntax 인식 못하는 부분만 바꿔줘서 빌드 성공
      4. sass-loader 버전을 9 버전으로 올려봄. import "common" 에서 에러가난다.
        1. sass-loader 9버전 부터는 dart-sass를 기본으로 인식한다.
      5. 일단 8버전이 문제가 없으니 9버전은 이후에 변경하기
  9. 빌드는 성공. 결과물은?

빌드 이후

  • process를 찾을 수 없음
    • ProvidePlugin 을 이용해서 추가해줘야한다.
  • file-loader output이 비정상적 [Object Module] 이런식으로 나옴
    • 일단 file-loader가 AssetModule API로 변경되어서 이걸 적용해보았으나 이 문제는 아니었음
    • 여기에 나온대로 ejs파일의  require에 .default를 붙여서 처리함
  • 일단은 큰 문제 없어보이는 빌드 성공

 기타 dependency 업데이트 및 deprecated 된 부분 처리

  • 웹팩 빌드시 뜨는 에러 부분

    • MainTemplate.hooks.globalHash 는 필요없어짐
    • MainTemplate.requireFn는 '__webpack_require__' 를 사용
    • Chunk.getModules > ChunkGraph API를 이용해야함
      • compilation.chunkGraph.getChunkModules(chunk)

  • webpack-cli option중 progress=true 사라지고 그냥 progress로 대체됨

    • progress=profile이라는 설정값이 생겼는데 빌드모니터링을 더 상세하게 하는 용도?

  • devtool 소스맵 설정값을 빈 문자열로 두면 안됨

  • splitChunks 옵션 일부가 사라지거나 변경됨.

Referred in

Webpack 4에서 5로 버전업 시도